<template>
  <div class="page" v-loading="loading" element-loading-text="加载中...">
    <div class="group_3 mt-33">
      <div class="filter-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索创意..."
          prefix-icon="el-icon-search"
          class="search-input"
        />
        <el-select v-model="sort_value" placeholder="排序" class="filter-select">
          <el-option label="全部" value="" />
          <el-option
            v-for="item in sort_options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <el-select v-model="idea_type_value" placeholder="创意类型" class="filter-select">
          <el-option label="全部" value="" />
          <el-option
            v-for="item in idea_type_options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </div>
      <span class="font_2 text_8">{{ num }} results</span>
      <div class="grid mt-27">
        <CommonCard
          class="cards"
          :dataItem="activity"
          v-for="activity in ideas"
          :key="activity.id"
          @activity-deleted="handleActivityDeleted"
        />
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CommonCard from "@/components/CommonCard.vue";
import { fetchActivities } from "@/api/api";

export default {
  data() {
    return {
      loading: true,
      searchQuery: '',
      sort_options: [
        {
          value: "1",
          label: "最新",
        },
        {
          value: "2",
          label: "最热",
        },
      ],
      idea_type_options: [
        {
          value: "1",
          label: "实践",
        },
        {
          value: "2",
          label: "理论",
        },
        {
          value: "3",
          label: "随笔",
        },
      ],
      sort_value: "",
      activity_checked: false,
      idea_type_value: "",
      num: 0,
      currentDate: new Date(),
      ideas: [],
      currentPage: 1,
      pageSize: 9,
      total: 0,
    };
  },
  components: {
    CommonCard,
  },
  methods: {
    fetchActivitiesData() {
      this.loading = true;
      fetchActivities(`/activities/with-likes?page=${this.currentPage}&size=${this.pageSize}`)
        .then((data) => {
          this.ideas = data.records;
          this.total = data.total;
          this.num = data.total;
          console.log("activities with likes", this.ideas);
        })
        .catch((error) => {
          console.error("There was an error fetching the activities!", error);
          this.$message.error('获取数据失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchActivitiesData();
    },
    handleActivityDeleted() {
      this.fetchActivitiesData();
    },
  },
  created() {
    this.fetchActivitiesData();
  },
};
</script>

<style scoped lang="css">
.el-loading-spinner {
  .el-loading-text {
    color: #409EFF;
    font-size: 16px;
    margin-top: 10px;
  }
  .circular {
    width: 42px;
    height: 42px;
  }
}

.mt-33 {
  margin-top: 33px;
}

.mt-27 {
  display: grid;
  margin-top: 27px;
}

.cards {
  justify-self: center;
  width: 300px;
}

.page {
  padding-bottom: 134px;
  background-color: #F5F8FF;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.group_3 {
  padding: 0 219px;
}

.filter-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.search-input {
  width: 300px;
}

.filter-select {
  width: 200px;
}

.font_2 {
  font-size: 24px;
  font-family: Cera-Bold, sans-serif;
  letter-spacing: 3.5px;
  line-height: 22px;
  color: #000000;
}

.text_8 {
  line-height: 19px;
}
.grid {
  min-height: 715px;
  display: grid;
  grid-template-columns: repeat(4, 300px);
  gap: 30px;
  width: 100%;
  justify-content: space-between;
}
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
